<template>
  <div class="settings">
    <div class="settings-center">
      <!-- <div v-if="userInfo">{{ userInfo }}</div>
      <div v-if="lang">{{ lang }}</div> -->
      <div class="text-center text-xl settings-center-title" @click="getUserInfo">{{ $t('settings.title') }}</div>
      <!-- 快捷键 -->
      <div class="shortcut-key">
        <div class="shortcut-key-title">{{ $t('settings.shortcut') }}</div>
        <div class="shortcut-key-ul">
          <div class="shortcut-key-li">
            <div class="shortcut-key-li-left">{{ $t('settings.evokeChortcut') }}</div>
            <div class="shortcut-key-li-right">
              <el-icon v-if="evokeChortcut && !isEvokeChortcut" class="shortcut-key-li-right-icon"><Warning /></el-icon>
              <ShortcutInput v-model="evokeChortcut"/>
            </div>
          </div>
          <div class="shortcut-key-li">
            <div class="shortcut-key-li-left">{{ $t('settings.screenshot') }}</div>
            <div class="shortcut-key-li-right">
              <el-icon v-if="screenshotChortcut && !isScreenshotChortcut" class="shortcut-key-li-right-icon"><Warning /></el-icon>
              <ShortcutInput v-model="screenshotChortcut"/>
            </div>
          </div>
          <div class="shortcut-key-li">
            <div class="shortcut-key-li-left">{{ $t('settings.screenRecorder') }}</div>
            <div class="shortcut-key-li-right">
              <el-icon v-if="screenRecordingChortcut && !isScreenRecordingChortcut" class="shortcut-key-li-right-icon"><Warning /></el-icon>
              <ShortcutInput v-model="screenRecordingChortcut"/>
            </div>
          </div>
          <div class="shortcut-key-li">
            <div class="shortcut-key-li-left">{{ $t('settings.QandA') }}</div>
            <div class="shortcut-key-li-right">
              <el-icon v-if="chatChortcut && !isChatChortcut" class="shortcut-key-li-right-icon"><Warning /></el-icon>
              <ShortcutInput v-model="chatChortcut"/>
            </div>
          </div>
        </div>
      </div>

      <!-- 储存管理 -->
      <div class="storage-path">
        <div class="storage-path-title">{{ $t('settings.store') }}</div>
        <div class="storage-path-ul">
          <div class="storage-path-li">
            <div class="storage-path-li-left">{{ $t('settings.screenRecorderPath') }}</div>
            <div class="storage-path-li-right">
              <div class="storage-path-li-right-input">
                <el-input
                  ref="inputRef"
                  v-model="recordingPath"
                  size="large"
                  style="width: 100%;"
                  readonly
                  :placeholder="$t('settings.screenRecorderPathTip')"
                  @click="selectAll"
                  @dblclick="copyToClipboard"
                  :title="recordingPath"
                />
              </div>
              <div>
                <el-button type="info" round @click="onPickPath">{{ $t('settings.change') }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import ShortcutInput from '@/components/ShortcutInput.vue'
import ipcMainApi from '@/ipcMainApi'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
const { t } = useI18n({ useScope: 'global' })

const userInfo = ref()
const lang = ref()
const getUserInfo = async () => {
  userInfo.value = await ipcMainApi.publicApi.getUserInfo()
  lang.value = await ipcMainApi.publicApi.getLanguage() // 获取语言
}

const evokeChortcut = ref() // 唤起快捷键
const screenshotChortcut = ref() // 截图快捷键
const screenRecordingChortcut = ref() // 录屏快捷键
const chatChortcut = ref() // 问答快捷键

// 检查快捷键是否冲突
const isEvokeChortcut = ref(true)
const isScreenshotChortcut = ref(true)
const isScreenRecordingChortcut = ref(true)
const isChatChortcut = ref(true)

// 监听快捷键变化
watch(evokeChortcut, async (newVal, oldVal) => {
  const data = { key: 'evokeChortcut', accelerator: newVal }
  isEvokeChortcut.value = await ipcMainApi.settingsApi.saveSingleShortcut(data)

  if (oldVal) ipcMainApi.settingsApi.unregisterSingleShortcut(oldVal)
})
watch(screenshotChortcut, async (newVal, oldVal) => {
  const data = { key: 'screenshotChortcut', accelerator: newVal }
  isScreenshotChortcut.value = await ipcMainApi.settingsApi.saveSingleShortcut(data)

  if (oldVal) ipcMainApi.settingsApi.unregisterSingleShortcut(oldVal)
})
watch(screenRecordingChortcut, async (newVal, oldVal) => {
  const data = { key: 'screenRecordingChortcut', accelerator: newVal }
  isScreenRecordingChortcut.value = await ipcMainApi.settingsApi.saveSingleShortcut(data)

  if (oldVal) ipcMainApi.settingsApi.unregisterSingleShortcut(oldVal)
})
watch(chatChortcut, async (newVal, oldVal) => {
  const data = { key: 'chatChortcut', accelerator: newVal }
  isChatChortcut.value = await ipcMainApi.settingsApi.saveSingleShortcut(data)

  if (oldVal) ipcMainApi.settingsApi.unregisterSingleShortcut(oldVal)
})

const recordingPath = ref()
// 选择目录
async function onPickPath() {
  const p = await ipcMainApi.settingsApi.pickRecordingPath()
  if (p) {
    const res = await ipcMainApi.settingsApi.saveRecordingPath(p)
    if (res?.success) {
      recordingPath.value = p
      ElMessage.success(t('settings.screenRecorderPathSuccess'))
    } else {
      ElMessage.error(t('settings.screenRecorderPathError'))
    }
  }
}

const inputRef = ref()
// 单击选中全部
const selectAll = () => {
  const inputEl = inputRef.value?.input
  if (inputEl) {
    inputEl.select()
  }
}

// 双击复制
const copyToClipboard = async () => {
  if (recordingPath.value) {
    try {
      await navigator.clipboard.writeText(recordingPath.value)
      ElMessage.success(t('settings.copyClipboard'))
    } catch (err) {
      console.error('复制失败', err)
      // ElMessage.error('复制失败')
    }
  }
}

onMounted(async () => {
  // 获取设置
  const settings = await ipcMainApi.settingsApi.getSettings()
  evokeChortcut.value = settings?.shortcuts?.evokeChortcut || ''
  screenshotChortcut.value = settings?.shortcuts?.screenshotChortcut || ''
  screenRecordingChortcut.value = settings?.shortcuts?.screenRecordingChortcut || ''
  chatChortcut.value = settings?.shortcuts?.chatChortcut || ''
  recordingPath.value = settings?.recordingPath || ''

  isEvokeChortcut.value = settings.shortcuts.isevokeChortcut
  isScreenshotChortcut.value = settings.shortcuts.isscreenshotChortcut
  isScreenRecordingChortcut.value = settings.shortcuts.isscreenRecordingChortcut
  isChatChortcut.value = settings.shortcuts.ischatChortcut

})
</script>

<style lang="scss" scoped>
.settings{
  background-color: none;
  user-select: none; /* 不允许鼠标复制 */
}
.settings-center-title {
  padding: 20px 0;
  color: rgb(28, 31, 35);
  font-weight: 600;
}
.settings-center {
  width: 650px;
  margin: 0 auto;
}
.shortcut-key-conflict {
  background-color: #f5f5f5;
  border-radius: 16px;
  padding: 12px 16px;
  margin-top: 20px;
  &-title {
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.85);
  }
}
.shortcut-key {
  padding-bottom: 30px;
  &-title {
    padding-left: 16px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: rgb(28, 31, 35);
  }
  &-ul {
    background-color: #f5f5f5;
    border-radius: 16px;
    padding: 0px 16px;
    margin-top: 20px;
  }
  &-li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0px;
    border-bottom: 1px solid #e0e0e0;
    &:last-child {
      border-bottom: none;
    }
    &-left {
      color: rgba(0, 0, 0, 0.85);
    }
    &-right {
      display: flex;
      align-items: center;
      &-icon {
        margin-right: 10px;
        color: #E6A23C;
      }
    }
  }
}

.storage-path {
  padding-bottom: 30px;
  &-title {
    padding-left: 16px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: rgb(28, 31, 35);
  }
  &-li {
    background-color: #f5f5f5;
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    &-left {
      color: rgba(0, 0, 0, 0.85);
    }
    &-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: end;
      &-input {
        width: calc(100% - 150px);
        min-width: 200px;
        margin-right: 10px;
      }
    }
  }
}
</style>
